<template>
    <view class="content">
        <view class="box" v-for="(item, index) in list" :key="index" @click="$gTo(`./card?card_id=${item.id}`)">
			<view class="item" :class="{active : item.status == 0}">
				<view class="top">
					<view class="sta" :class="{activeSta : item.status == 0}" @click.stop="$gTo(`./buy?card_id=${item.id}`)">立即续费</view>
				</view>
				<!-- status=0未绑定  1已绑定 2已预约 -->
				<view class="cen" :class="{activeCen : item.status == 0}">
					<view class="name">{{ item.status == 0 ? '未绑定用户' : item.nickname }}</view>
					<view class="num">NO.{{item.card_no}}</view>
				</view>
				<view class="down">
					<view class="u-flex-1">
						<view class="title">一诺健康管理卡</view>
						<view class="sy">剩余体检次数:{{item.exam_nums}}次</view>
						<!-- status=5 已过期 -->
						<view class="time" v-if="item.status == 5">{{item.status_txt}}</view>
						<view class="time" v-else>有效期至{{item.end_time}}</view>
					</view>
					<image src="../../static/image/card_2.png" class="card-1" v-if="item.status == 0"></image>
					<image src="../../static/image/card_1.png" class="card-1" v-else></image>
				</view>
			</view>
			<view class="btns">
				<view class="btn2" v-if="item.status == 0" @click.stop="$gTo(`./share?card_id=${item.id}`)">转赠</view>
				<view class="btn1" v-if="item.status == 0" @click.stop="$gTo(`./card?card_id=${item.id}`)">立即绑定</view>
				<view class="btn1" v-if="item.status == 1 && item.exam_nums > 0" 
					@click.stop="$cTo(`/pages/medical/list?card_id=${item.id}`)">立即预约</view>
			</view>
		</view>
		
		<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
            };
        },
        onShow() {
            this.getList()
        },
        methods: {
            getList() {
            	this.$ajax('get_cards', {
                    userToken: this.$getSync('userToken'),
					type: 0,//0-个人中心 1-体检预约
                }).then(ret => {
            		if (ret.status == 0) {
                        this.list = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
	.content{
		padding: 30rpx 20rpx;
	}
	.box{
		padding-bottom: 50rpx;
	}
	.item{
		width: 710rpx;
		height: 350rpx;
		border-radius: 15rpx;
		padding-left: 40rpx;
		padding-bottom: 30rpx;
		background: linear-gradient(125deg,#fff4e1,#ecc48a,#eec084);
		color: #843d12;
	}
	.active{
		background: linear-gradient(125deg,#eef2f6,#d0d6de,#bfc8d2);
		color: #515c70;
	}
	.top{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.sta{
		font-size: 26rpx;
		color: #fff;
		padding: 8rpx 20rpx;
		background: linear-gradient(to right,#e1a561,#d4873a);
		border-radius: 0 15rpx 0 20rpx;
	}
	.activeSta{
		background: linear-gradient(to right,#a3adbb,#8994a9);
	}
	.cen{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-right: 40rpx;
		padding-top: 4rpx;
		padding-bottom: 14rpx;
		border-bottom: 2rpx solid #a56c33;
	}
	.activeCen{
		border-bottom: 2rpx solid #7f8da7;
	}
	.name{
		flex: 1;
		font-size: 34rpx;
		padding-right: 20rpx;
	}
	.num{
		font-size: 30rpx;
		font-weight: bold;
	}
	.down{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 25rpx;
		padding-right: 20rpx;
	}
	.title{
		font-size: 44rpx;
		font-weight: bold;
	}
	.sy{
		font-size: 30rpx;
	}
	.time{
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 24rpx;
	}
	.card-1{
		width: 176rpx;
		height: 176rpx;
	}
	.btns{
		padding-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.btns>view{
		width: 156rpx;
		height: 58rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		margin-left: 25rpx;
	}
	.btn1{
		color: #fff;
		background-color: #5c667b;
	}
	.btn2{
		color: #5c667b;
		background-color: #fff;
		border: 2rpx solid #5c667b;
	}
	
	

</style>
